<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>抽奖</title>

    <!-- 这里是css部分 -->

    <style>
        #bg {
            width: 650px;
            height: 600px;
            margin: 0 auto;
            background: url(201608150908513.jpg) no-repeat;
            position: relative;
        }

        img[src^="201608150908502"] {
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }

        img[src^="201608150908514"] {
            position: absolute;
            z-index: 5;
            top: 60px;
            left: 116px;

        }

        .transition {
            transition: all 4s;
        }
    </style>
</head>

<body>
    <!-- 这里是HTML结构部分 -->

    <div id="bg">

        <img src="201608150908502.png" alt="pointer">
        <img src="201608150908514.png" alt="turntable">
    </div>

    <!-- 这里是js部分 -->

    <script>
        var buyu = 0;
        var cnt = 1;
        var cat = 51.2
        var b = 0;
        var oPointer = document.getElementsByTagName("img")[0];
        var oTurntable = document.getElementsByTagName("img")[1];
        function rot() {
            var r = Math.floor(Math.random() * (360 - 0 + 1))
            var a = 360 * 5 * 1 + buyu + r
            oTurntable.setAttribute("class", "transition");
            oTurntable.style.transform = "rotate(" + (a) + "deg)";

            b = a - 360 * 5 * 1 + buyu
            console.log(b)
            setTimeout(function () {
                oTurntable.setAttribute("class", "");
                oTurntable.style.transform = "rotate(" + (b) + "deg)";
                num = b % 360
                if (num <= cat * 1) {
                    alert("4999元");
                } else if (num <= cat * 2) {
                    alert("条50元");
                } else if (num <= cat * 3) {
                    alert("10元");
                } else if (num <= cat * 4) {
                    alert("5元");
                } else if (num <= cat * 5) {
                    alert("免息服务");
                } else if (num <= cat * 6) {
                    alert("提交白金");
                } else if (num <= cat * 7) {
                    alert("未中奖");
                }
            }, 4500)

        }
        oPointer.onclick = function () {
            rot()
        }
    </script>
</body>

</html>